<template>
	<myHeadTab>测试</myHeadTab>
	<view>
		<view class="b1">
			
			<view class="b2" style="display: flex;">
				
				<view style="height: 100%;width: 32.24rpx;">
					<image style="height: 32.24rpx;width: 32.24rpx;position: relative;top: 8rpx;" src="../../../static/提示.png"></image>
				</view>
				
				<view style="width: 16rpx;height: 100%;"></view>
				
				<view class="b3">
					对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武装头脑，指导实践推动工作。
				</view>
				
				
			</view>
			
		</view>
		
		
		<view style="background: #F1F5FF;height: 100%;">
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='单选题'){return true;}});return false}">
				
				<view style="height: 50rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%; background-image: url(../../../static/bg.png);background-repeat: no-repeat;  padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">一.单选题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='单选题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{formatQuestion(item.topicTitle,item.examineeAnswer)}}</text>
						
							<template v-for="(i,innerIndex) in item.answer">
								<view style="height: 14rpx;width: 100%;"></view>
								<view class="f6" style="width: fit-content;" @tap="handleSingleAnswerSelect(i.option,index,item)">{{i.option}}、{{i.content}}
								<view style="height: 6rpx;width: 0%;" :class="[item.examineeAnswer == i.option?'hover-hr':'']"></view>
								</view>
								
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
						
							
							
						</view>
			
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
				
			</view>
			
			
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='多选题'){return true;}});return false}">
				
				<view style="height: 16rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%; background-image: url(../../../static/bg.png);background-repeat: no-repeat;padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">二.多选题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='多选题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{formatQuestion(item.topicTitle,item.examineeAnswer)}}</text>
						
							<template v-for="(i,innerIndex) in item.answer">
								<view style="height: 20rpx;width: 100%;"></view>
								<view class="f6" style="width: fit-content;" @tap="handleAnyAnswerSelect(i.option,index,item)">{{i.option}}、{{i.content}}
								<view style="height: 6rpx;width: 0%;" :class="[item.examineeAnswer.includes(i.option) ?'hover-hr':'']"></view>
								</view>
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
						
							
							
						</view>
				
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
			</view>
			
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='填空题'){return true;}});return false}">
				
				<view style="height: 16rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%; background-image: url(../../../static/bg.png);background-repeat: no-repeat;padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">三.填空题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='填空题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{item.topicTitle}}</text>
						
							<template v-for="(item,index) in item.answer">
								<view style="height: 20rpx;width: 100%;"></view>
								<text class="f6">{{item.option}}、{{item.content}}</text>
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
							<input @input="handleInput(item,$event)" class="i f9" placeholder="请输入答案" placeholder-class="pl"/>

							
							<view style="height: 20rpx;width: 100%;"></view>
							
						
							
							
						</view>
				
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<button class="submit-btn"><view class="submit-font">立即提交</view></button>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<button class="save-btn"><view class="save-font">保存记录</view></button>
				
				<view style="height: 46rpx;width: 100%;"></view>
				
			</view>
			
			
			
		</view>
		
	</view>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import myHeadTab from '../../../component/myHeadTab/index.vue'
import { onLoad } from '@dcloudio/uni-app';


	const testId = ref();
	onLoad((options) => {
		console.log('接受值:',options);
		testId.value = options.testId;
	})
	
	const exam = ref()
	
	onMounted(()=>{
		uni.request({
			url: '/data/test.json',
			data:{testId: testId.value },
			method: 'POST',
			success(res) {
				exam.value = res.data.at(0);
			}
		})
	})
	

function formatQuestion(question, answer) {  
    return question.replace('（', `（ ${answer} `); 
}  

function handleInput(item,event){
	item.examineeAnswer = event.detail.value
}

function handleSingleAnswerSelect(option,index,item){
	if(item.examineeAnswer.includes(option)){
			item.examineeAnswer = removeCharacter(item.examineeAnswer,option)
		}else{
			item.examineeAnswer = option;
		}
}

function removeCharacter(str, charToRemove) {  
    const regex = new RegExp(charToRemove, 'g'); // 创建一个正则表达式，'g'表示全局匹配  
    return str.replace(regex, ''); // 使用replace方法去除指定字符  
} 

function handleAnyAnswerSelect(option,index,item){
	
	if(item.examineeAnswer.includes(option)){
		item.examineeAnswer = removeCharacter(item.examineeAnswer,option)
	}else{
		item.examineeAnswer += option;
	}
}

</script>

<style scoped>
	
	.hover-hr{
		width: 100% !important;
		transition: 0.5s all;
		background: #276EFF;
	}
	
	.save-font{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		letter-spacing: 0;
		line-height: 80rpx;
	}
	
	.save-btn{
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #E7EDFB;
		border-radius: 16rpx;
	}
	
	
	.submit-font{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 80rpx;
	}
	
	.submit-btn{
		width: 686rpx;
		height: 80rpx;
		background: #276EFF;
		border-radius: 16rpx;
	}
.i{
	width: 662rpx;
	height: 72rpx;
	background: #FFFFFF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
	padding-left: 24rpx;
}
	
.b1{
	width: 100%;
	height: 98rpx;
	background: #FFF5E6;
	padding-top: 18rpx;
	padding-left: 24rpx;

}
.b2{
	width: 704rpx;
	height: 80rpx;
}
.b3{
	width: 656rpx;
	height: 80rpx;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #FF7700;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #FF7700;
	letter-spacing: 0;
	line-height: 40rpx;
}
.card{
	width: 654rpx;
	height: 364rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
	padding-left: 32rpx;

}
.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
}
.f3{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	 line-height: 40rpx;
}

.f4{
	 color: #ff7700;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.v{
	width: 100%;
	height: 40rpx;
}
.f5{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	letter-spacing: 0;
}
.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
}
.f7{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f8{
	 color: #ff7700;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 72rpx;
}
.pl{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #A9ACB4;
	letter-spacing: 0;
}
</style>
